<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>邮件设计</title>
  <link rel="icon" type="image/ico" href="/pc/inbox_icon.png">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
    }

    /* 导航栏样式 */
    .navbar {
      background-color: white;
      padding: 1rem 2rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 100;
    }

    .nav-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: #3b82f6;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center;
    }

    .nav-link {
      color: #64748b;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-link:hover {
      color: #3b82f6;
    }

    .nav-button {
      background-color: #3b82f6;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      text-decoration: none;
      transition: background-color 0.2s;
    }

    .nav-button:hover {
      background-color: #2563eb;
    }

    .username {
      font-weight: 500;
      color: #3b82f6;
    }

    /* 主要内容样式 */
    .main {
      margin-top: 4rem;
      padding: 4rem 2rem;
    }

    .hero {
      max-width: 1200px;
      margin: 0 auto 6rem;
      text-align: center;
      padding: 2rem;
    }

    .hero h1 {
      font-size: 3rem;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero p {
      font-size: 1.25rem;
      color: #64748b;
      margin-bottom: 2rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-button {
      display: inline-block;
      background-color: #3b82f6;
      color: white;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      text-decoration: none;
      font-weight: 500;
      transition: transform 0.2s;
    }

    .cta-button:hover {
      transform: translateY(-2px);
    }

    /* 特性部分 */
    .features {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      padding: 2rem;
    }

    .feature-card {
      background: white;
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s;
    }

    .feature-card:hover {
      transform: translateY(-5px);
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      background-color: #dbeafe;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .feature-icon svg {
      width: 24px;
      height: 24px;
      color: #3b82f6;
    }

    .feature-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .feature-description {
      color: #64748b;
      line-height: 1.6;
    }

    /* 模板展示部分 */
    .templates {
      max-width: 1200px;
      margin: 6rem auto;
      padding: 2rem;
    }

    .section-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 3rem;
    }

    .template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }

    .template-card {
      background: white;
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s;
    }

    .template-card:hover {
      transform: translateY(-5px);
    }

    .template-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .template-info {
      padding: 1.5rem;
    }

    .template-name {
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .template-category {
      color: #64748b;
      font-size: 0.875rem;
    }

    /* 页脚样式 */
    .footer {
      background-color: white;
      padding: 4rem 2rem;
      margin-top: 4rem;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 4rem;
    }

    .footer-section h3 {
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
      color: #1e293b;
    }

    .footer-links {
      list-style: none;
    }

    .footer-link {
      color: #64748b;
      text-decoration: none;
      margin-bottom: 0.75rem;
      display: block;
      transition: color 0.2s;
    }

    .footer-link:hover {
      color: #3b82f6;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2rem;
      }

      .nav-links {
        display: none;
      }

      .features {
        grid-template-columns: 1fr;
      }

      .template-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<nav class="navbar">
  <div class="nav-content">
    <div class="logo">EmailCraft</div>
    <div class="nav-links">
      <a href="/visual-editor.html" class="nav-link">模板编辑</a>
      <a href="/email_style.html" class="nav-link">模板市场</a>
      <a href="/user_email.html" class="nav-link">我的模版</a>
      <a href="/email_pay.html" class="nav-link">价格</a>
      <a href="/help.html" class="nav-link">帮助</a>
      <!-- 登录按钮或用户名 -->
      <div id="auth-section">
        <a href="/login.html" class="nav-button" id="login-button">登录</a>
        <span id="username" class="username" style="display: none;"></span>
      </div>
    </div>
  </div>
</nav>

<main class="main">
  <section class="hero">
    <h1>创建精美的响应式邮件模板</h1>
    <p>使用我们直观的拖放编辑器，轻松创建专业的电子邮件。无需编码经验，快速打造令人印象深刻的邮件营销活动。</p>
    <a href="email.html" class="cta-button">开始使用</a>
  </section>

  <section class="features">
    <div class="feature-card">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
          <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
          <path d="M2 2l7.586 7.586"></path>
          <circle cx="11" cy="11" r="2"></circle>
        </svg>
      </div>
      <h3 class="feature-title">拖放编辑器</h3>
      <p class="feature-description">简单直观的界面设计，让您轻松创建专业的邮件模板。无需任何编码知识。</p>
    </div>

    <div class="feature-card">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
          <line x1="8" y1="21" x2="16" y2="21"></line>
          <line x1="12" y1="17" x2="12" y2="21"></line>
        </svg>
      </div>
      <h3 class="feature-title">响应式设计</h3>
      <p class="feature-description">所有模板都经过优化，可在任何设备上完美显示，确保最佳的用户体验。</p>
    </div>

    <div class="feature-card">
      <div class="feature-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12"></line>
        </svg>
      </div>
      <h3 class="feature-title">丰富的模板</h3>
      <p class="feature-description">提供数百个精心设计的模板，覆盖各种场景和行业需求。</p>
    </div>
  </section>

  <section class="templates">
    <h2 class="section-title">精选模板</h2>
    <div class="template-grid">
      <div class="template-card">
        <img src="/pc/pc1.png" alt="营销邮件模板" class="template-image">
        <div class="template-info">
          <h3 class="template-name">现代营销邮件</h3>
          <p class="template-category">营销推广</p>
        </div>
      </div>

      <div class="template-card">
        <img src="/pc/pc2.png" alt="新闻通讯模板" class="template-image">
        <div class="template-info">
          <h3 class="template-name">每周新闻通讯</h3>
          <p class="template-category">资讯订阅</p>
        </div>
      </div>

      <div class="template-card">
        <img src="/pc/pc3.png" alt="活动邀请模板" class="template-image">
        <div class="template-info">
          <h3 class="template-name">活动邀请函</h3>
          <p class="template-category">活动通知</p>
        </div>
      </div>

      <div class="template-card">
        <img src="/pc/pc4.png" alt="欢迎邮件模板" class="template-image">
        <div class="template-info">
          <h3 class="template-name">欢迎邮件</h3>
          <p class="template-category">用户引导</p>
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="footer">
  <div class="footer-content">
    <div class="footer-section">
      <h3>产品</h3>
      <ul class="footer-links">
        <li><a href="#" class="footer-link">功能</a></li>
        <li><a href="#" class="footer-link">模板</a></li>
        <li><a href="#" class="footer-link">集成</a></li>
        <li><a href="#" class="footer-link">价格</a></li>
      </ul>
    </div>

    <div class="footer-section">
      <h3>资源</h3>
      <ul class="footer-links">
        <li><a href="#" class="footer-link">博客</a></li>
        <li><a href="#" class="footer-link">指南</a></li>
        <li><a href="#" class="footer-link">帮助中心</a></li>
        <li><a href="#" class="footer-link">API文档</a></li>
      </ul>
    </div>

    <div class="footer-section">
      <h3>公司</h3>
      <ul class="footer-links">
        <li><a href="#" class="footer-link">关于我们</a></li>
        <li><a href="#" class="footer-link">联系我们</a></li>
        <li><a href="#" class="footer-link">加入我们</a></li>
        <li><a href="#" class="footer-link">合作伙伴</a></li>
      </ul>
    </div>

    <div class="footer-section">
      <h3>法律</h3>
      <ul class="footer-links">
        <li><a href="#" class="footer-link">隐私政策</a></li>
        <li><a href="#" class="footer-link">服务条款</a></li>
        <li><a href="#" class="footer-link">安全说明</a></li>
        <li><a href="#" class="footer-link">版权声明</a></li>
      </ul>
    </div>
  </div>
</footer>

<script>
  // 检查用户登录状态
  async function checkLoginStatus() {
    try {
      const response = await fetch('/api/v1/users/isLogin', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      });
      const data = await response.json();
      if (data.code === 200 && data.data.login) {
        // 用户已登录，显示用户名
        document.getElementById('login-button').style.display = 'none';
        document.getElementById('username').style.display = 'inline';
        document.getElementById('username').textContent = data.data.username;
      } else {
        // 用户未登录，显示登录按钮
        document.getElementById('login-button').style.display = 'inline';
        document.getElementById('username').style.display = 'none';
      }
    } catch (error) {
      console.error('检查登录状态失败：', error);
    }
  }

  // 页面加载时检查登录状态
  window.addEventListener('load', function () {
    checkLoginStatus();
  });
</script>
</body>
</html>